<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <style>
        body {
            margin: 30px;
        }

        .flip-list-move {
            transition: transform 0.8s ease;
        }
    </style>

    <script src="./lodash.min.js"></script>
    <script src='./vue.global.js'></script>

</head>

<body>
    <div id="flip-list-demo">
        <button @click="shuffle">Shuffle</button>
        
        <transition-group name="flip-list" tag="ul">
            <li v-for="item in items" :key="item">
                {{ item }}
            </li>
        </transition-group>
    </div>

    <script type="module">
        // import lodash from "./node_modules/lodash-es/lodash.default.js";
        // const _ = lodash

        const Demo = {
            data() {
                return {
                    items: [1, 2, 3, 4, 5, 6, 7, 8, 9]
                };
            },
            methods: {
                shuffle() {
                    this.items = _.shuffle(this.items);
                }
            }
        };

        Vue.createApp(Demo).mount("#flip-list-demo");
    </script>
</body>

</html>